<template>
  <div class="icon-select">
    <el-input
        v-model="iconName"
        clearable
        placeholder="请输入图标名称"
        @clear="filterIcons"
        @input="filterIcons"
    >
    </el-input>
    <div class="icon-select_list">
      <div v-for="(item,index) in iconList" :key="index" @click="selectedIcon(item)">
        <svg color="#999" :icon-class="item" style="height: 30px;width: 16px;margin-right: 5px"></svg>
        <span>{{item}}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
const icons = []
const modules = import.meta.glob('@/assets/icons/svg/*.svg')
console.log(modules, '==---===-=-=-=-')
for (const path in modules){
  const p = path.split('assets/icons/svg/')[1].split('.svg')[0]
  console.log(p, '=================================')
  icons.push(p)
}
const iconList = ref(icons)
const iconName = ref('')
const emit = defineEmits(['selected'])
const filterIcons = ()=>{
  iconList.value = icons
  if (iconName.value){
    iconList.value = icons.filter(item=>item.indexOf(iconName.value) !==-1)
  }
}
const selectedIcon = (item)=>{
  emit('selected',item)
  document.body.click()
}

</script>

<style scoped lang="scss">
.icon-select{
  width: 100%;
  padding: 10px;
   &_list{
     height: 200px;
     overflow-y: scroll;
     display: grid;


     .icon-item{
       height: 30px;
       line-height: 30px;
       margin-bottom: -5px;
       cursor: pointer;
       display: flex;
       flex-direction: column;


       .svg-name{
         width: 100%;
         overflow: hidden;
       }
     }

   }
}
</style>
